<template>
    <div class="app-container">
        <div class="filter-container">
            <el-button class="filter-item" type="primary" @click="add">新增</el-button>
        </div>
        <el-table
            :key="0"
            v-loading="listLoading"
            :data="list"
            border
            fit
            highlight-current-row
            style="width: 100%;"
        >
            <el-table-column label="名称" prop="labelName"></el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button @click="del(scope.row.id)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <pagination
            v-show="total > 0"
            :total="total"
            :page.sync="page"
            :limit.sync="limit"
            @pagination="getList"
        />
    </div>
</template>

<script>
    import { labelList, addLabel, delLabel } from '@/api/wx-front'
    import Pagination from '@/components/Pagination' // Secondary package based on el-pagination

    export default {
        components: {
            Pagination
        },

        data() {
            return {
                listLoading: true,
                list: [],
                account: '',
                page: 1,
                limit: 30,
                total: 0
            }
        },

        methods: {
            formatTime(num) {
                const time = new Date(num)
                const year = time.getFullYear()
                const month = time.getMonth() + 1
                const date = time.getDate()
                const hour = time.getHours()
                const minute = time.getMinutes()

                return `${year}-${month <= 9 ? '0' : ''}${month}-${date <= 9 ? '0' : ''}${date} ${hour <= 9 ? '0' : ''}${hour}:${minute <= 9 ? '0' : ''}${minute}`
            },

            async add() {
                const { value } = await this.$prompt('请输入标签名称', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消'
                })

                if (value && value.replace(/\s+/g, '')) {
                    const { code } = await addLabel({
                        labelName: value
                    })

                    if (code === 200) {
                        this.$message.success('添加成功')
                        this.reset()
                    }
                }
            },

            async getList() {
                const { data: { total, list } } = await labelList({
                    page: this.page,
                    limit: this.limit
                })

                this.list = list
                this.total = total
                this.listLoading = false
            },

            reset() {
                this.page = 1
                this.account = ''
                this.getList()
            },

            async del(id) {
                await this.$confirm('确定删除这个标签？', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                })

                const { code } = await delLabel({
                    id
                })

                if (code === 200) {
                    this.$message.success('删除成功')
                    this.getList()
                }
            }
        },

        mounted() {
            this.getList()
        }
    }
</script>
